JavaScript থেকে WebAssembly মডিউল কল করা
WebAssembly (WASM) কোডকে JavaScript এ ইন্টিগ্রেট করে রান করা সম্ভব। এটি WebAssembly এর মাধ্যমে কোডের পারফরম্যান্স বৃদ্ধি করতে এবং JavaScript এর কিছু সীমাবদ্ধতা কাটিয়ে উঠতে সাহায্য করে। WebAssembly মডিউলকে JavaScript এ কল করা সাধারণত কয়েকটি ধাপে করা হয়:
- WebAssembly মডিউল লোড করা
- ফাংশন এক্সপোর্ট করা
- WebAssembly মডিউল থেকে ফাংশন কল করা
এখানে WebAssembly মডিউলকে JavaScript এ কল করার পুরো প্রক্রিয়া বিস্তারিতভাবে দেখানো হলো।
1. WebAssembly মডিউল তৈরি করা
প্রথমে একটি সহজ WebAssembly মডিউল তৈরি করা যাক যা JavaScript থেকে কল করা হবে। উদাহরণস্বরূপ, একটি add ফাংশন যা দুটি সংখ্যা যোগ করবে।
WebAssembly Text Format (WAT):
(module
(func $add (param $a i32) (param $b i32) (result i32)
(i32.add
(local.get $a)
(local.get $b)
)
)
(export "add" (func $add))
)এই WAT ফাইলটি একটি add ফাংশন এক্সপোর্ট করে যা দুটি 32-বিট পূর্ণসংখ্যার যোগফল প্রদান করবে।
এখন, এই .wat ফাইলটিকে WebAssembly বাইনারি ফরম্যাটে রূপান্তর করতে হবে।
.wat থেকে .wasm এ রূপান্তর:
এটি করার জন্য wat2wasm টুল ব্যবহার করা হয়:
wat2wasm add.wat -o add.wasmএটি add.wasm নামক WebAssembly বাইনারি ফাইল তৈরি করবে যা আমরা JavaScript থেকে ব্যবহার করব।
2. JavaScript থেকে WebAssembly মডিউল লোড করা
JavaScript এ WebAssembly মডিউল লোড এবং ব্যবহার করার জন্য প্রথমে WebAssembly বাইনারি ফাইলটি লোড করতে হবে।
fetch('add.wasm') // WASM ফাইলটি ফেচ করা হচ্ছে
.then(response => response.arrayBuffer()) // রেসপন্সটি অ্যারেবাফারে পরিণত করা
.then(bytes => WebAssembly.instantiate(bytes)) // WebAssembly ইনস্ট্যান্স তৈরি করা
.then(wasmModule => {
// WASM মডিউল প্রস্তুত
const { add } = wasmModule.instance.exports; // `add` ফাংশন এক্সপোর্ট করা হচ্ছে
console.log(add(2, 3)); // WebAssembly `add` ফাংশন কল করা হচ্ছে
})
.catch(console.error);ব্যাখ্যা:
fetch('add.wasm'): এটিadd.wasmফাইলটি ব্রাউজার থেকে ফেচ করে।arrayBuffer(): ফাইলটি অ্যারেবাফারে রূপান্তরিত করা হয়, যাতে বাইনারি ডেটা পড়া যায়।WebAssembly.instantiate(): এই ফাংশনটি.wasmফাইলটি ইনস্ট্যান্সিয়েট করে, অর্থাৎ সেটি WebAssembly মডিউলে রূপান্তরিত হয়।wasmModule.instance.exports.add: WebAssembly মডিউল থেকেaddফাংশন এক্সপোর্ট করা হয় এবং JavaScript থেকে সেটি কল করা হয়।
এখন আপনি যদি এই স্ক্রিপ্টটি আপনার ওয়েবপেজে রান করেন, তাহলে এটি 2 + 3 = 5 আউটপুট করবে।
3. মেমোরি এবং ফাংশন এক্সপোর্ট করা
WebAssembly মডিউলে শুধু ফাংশনই নয়, মেমোরি বা অন্যান্য উপাদানও এক্সপোর্ট করা যেতে পারে। উদাহরণস্বরূপ, যদি আপনি মেমোরি এক্সপোর্ট করতে চান, তবে মেমোরি সংক্রান্ত কাজ JavaScript থেকে করতে পারেন।
WebAssembly মডিউলে মেমোরি এক্সপোর্ট:
(module
(memory 1) ;; 64KB মেমোরি
(export "memory" (memory 0))
(func $set_value (param $index i32) (param $value i32)
(i32.store
(local.get $index)
(local.get $value)
)
)
(export "set_value" (func $set_value))
)এখানে set_value ফাংশনটি মেমোরিতে নির্দিষ্ট অবস্থানে একটি মান লেখার জন্য ব্যবহৃত হচ্ছে এবং memory এক্সপোর্ট করা হচ্ছে।
JavaScript কোড:
fetch('memory.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(wasmModule => {
const { memory, set_value } = wasmModule.instance.exports;
// মেমোরি ব্যবহারের জন্য অ্যারের ভিউ তৈরি করা হচ্ছে
const view = new Int32Array(memory.buffer);
set_value(0, 42); // মেমোরির প্রথম অবস্থানে 42 লেখা হচ্ছে
console.log(view[0]); // আউটপুট: 42
})
.catch(console.error);এখানে, JavaScript থেকে memory এক্সপোর্ট করে মেমোরি অ্যাক্সেস করা হচ্ছে এবং set_value ফাংশনকে কল করা হচ্ছে।
4. WebAssembly মডিউল এবং JavaScript এর মধ্যে পারস্পরিক ক্রিয়া
JavaScript এবং WebAssembly এর মধ্যে পারস্পরিক ক্রিয়া সাধারণত ইমপোর্ট এবং এক্সপোর্ট ব্যবস্থার মাধ্যমে পরিচালিত হয়। WebAssembly মডিউলগুলি JavaScript এর সাথে যোগাযোগ করতে পারে এবং উল্টোও সম্ভব, যেমন JavaScript থেকে WebAssembly ফাংশন কল করা এবং এক্সপোর্ট করা।
সারসংক্ষেপ
JavaScript থেকে WebAssembly মডিউল কল করা খুবই সহজ। আপনি .wasm ফাইলটি fetch করে, instantiate করে এবং তারপরে এক্সপোর্ট করা ফাংশনগুলি JavaScript থেকে কল করতে পারেন। WebAssembly ফাংশনগুলি খুব দ্রুত রান করে এবং গাণিতিক বা কমপ্লেক্স কাজের জন্য JavaScript এর তুলনায় অনেক বেশি কার্যকরী। এই প্রক্রিয়াটি ওয়েব অ্যাপ্লিকেশনে পারফরম্যান্স বৃদ্ধি করতে এবং JavaScript এর সীমাবদ্ধতা কাটিয়ে ওঠার জন্য ব্যবহৃত হয়।
Read more
